<template>
	<section id="securityName">
		<HeaDer :Title='titleData'></HeaDer>
		<section class="nameWarp">
			<section class="title">
				<h2>身份认证</h2>
			</section>
			<section class="formWarp">
				<van-cell-group>
					<span class="title">姓名</span>
					<van-field v-model="userData.realname" placeholder="请输入用户名" />
					<span class="title">身份证号</span>
					<van-field v-model="userData.idcard" placeholder="请输入身份证号码" />					
				</van-cell-group>
				<section class="cardImgs">
					<span class="title">手持身份证</span>			
					<section class="imgsWarp">
						<section class="img1">							
							<p class="upload1">							
								<img src="../../../static/img/add_img.png" class=""/>							
							</p>			
							<img :src="imgs.img1" class="preview" v-show="imgs.img1"/>
						</section>
						
						<section class="img2">							
							<p class="upload2">							
								<img src="../../../static/img/add_img.png" class=""/>
							</p>
							<img :src="imgs.img2" class="preview" v-show="imgs.img2"/>
						</section>						
						<section class="img3">
							<p class="upload3">							
								<img src="../../../static/img/add_img.png" class=""/>
							</p>
							<img :src="imgs.img3" class="preview" v-show="imgs.img3"/>
						</section>
						
					</section>
				</section>
				
				<section class="btnWarp" @click="submit">
					<section class="btn">
						确定
					</section>
				</section>
			</section>

		</section>
	</section>
</template>

<script>
	import HeaDer from "../common/header.vue";
	export default {
		data() {
			
			return {
				titleData: {
					name: '',
					flat: 1
				},
				imgs:{
					img1:'',
					img2:'',
					img3:''
				},
				userData:{
					realname: '',  //姓名
					mobile: sessionStorage.mobile,  //手机号
					idcard: '',   //省份号
					image1: '',  //图片
					image2: '',
					image3: ''
				}				
			}
		},
		methods: {
			uploadcardimg1() {
				var _this = this;				
				_this.uploader = WebUploader.create({
					auto: true, // 选完文件后，是否自动上传 
					swf: '../../../static/upload_img/Uploader.swf', // swf文件路径 
					server: _this.$host.upload, // 文件接收服务端 
					pick: ".upload1", // 选择文件的按钮。可选
					// 只允许选择图片文件。 
					accept: {
						title: 'Images',
						extensions: 'jpg,jpeg,png',
						mimeTypes: 'image/jpg,image/jpeg,image/png'
					},
					thumb: {
						type: 'image/jpg,jpeg,png'
					},
					// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
					resize: false,
					fileNumLimit: 8, //限制上传个数
					fileSingleSizeLimit: 2048000 //限制单个上传图片的大小
				});
				// 上传成功
				_this.uploader.on('uploadSuccess', function(file, data) {
					console.log(data.url);
					//这个域名在项目中要更改
					_this.imgs.img1 = 'http://www.vpivp.com/' + data.url;
					_this.userData.img1 = data.url;
				});

			},
			uploadcardimg2() {
				var _this = this;				
				_this.uploader = WebUploader.create({
					auto: true, // 选完文件后，是否自动上传 
					swf: '../../../static/upload_img/Uploader.swf', // swf文件路径 
					server: _this.$host.upload, // 文件接收服务端 
					pick: ".upload2", // 选择文件的按钮。可选
					// 只允许选择图片文件。 
					accept: {
						title: 'Images',
						extensions: 'jpg,jpeg,png',
						mimeTypes: 'image/jpg,image/jpeg,image/png'
					},
					thumb: {
						type: 'image/jpg,jpeg,png'
					},
					// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
					resize: false,
					fileNumLimit: 8, //限制上传个数
					fileSingleSizeLimit: 2048000 //限制单个上传图片的大小
				});
				// 上传成功
				_this.uploader.on('uploadSuccess', function(file, data) {
					console.log(data.url);
					//这个域名在项目中要更改
					_this.imgs.img2 = 'http://www.vpivp.com/' + data.url;
					_this.userData.img2 = data.url;
				});

			},
			uploadcardimg3() {
				var _this = this;				
				_this.uploader = WebUploader.create({
					auto: true, // 选完文件后，是否自动上传 
					swf: '../../../static/upload_img/Uploader.swf', // swf文件路径 
					server: _this.$host.upload, // 文件接收服务端 
					pick: ".upload3", // 选择文件的按钮。可选
					// 只允许选择图片文件。 
					accept: {
						title: 'Images',
						extensions: 'jpg,jpeg,png',
						mimeTypes: 'image/jpg,image/jpeg,image/png'
					},
					thumb: {
						type: 'image/jpg,jpeg,png'
					},
					// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
					resize: false,
					fileNumLimit: 8, //限制上传个数
					fileSingleSizeLimit: 2048000 //限制单个上传图片的大小
				});
				// 上传成功
				_this.uploader.on('uploadSuccess', function(file, data) {
					console.log(data.url);
					//这个域名在项目中要更改
					_this.imgs.img3 = 'http://www.vpivp.com/' + data.url;
					_this.userData.img3 = data.url;
				});

			},
			submit(){
				var _this = this;
				if(!_this.userData.realname){
					_this.$toast('用户名不能为空');
					return false;
				}else if(!_this.$public.isCardID(_this.userData.idcard)){
					_this.$toast('身份证号格式有误');
					return false;
				}else if(!_this.userData.img1 || !_this.userData.img2 || !_this.userData.img3){
					_this.$toast('请上传三张有效图片');
					return false;
				}
					
				_this.$public.loading('验证中...',_this);
				_this.$http.post(_this.$host.set_aut,_this.userData).then(function(data){
					_this.$toast(data.data.msg);
					_this.$public.go('security', 200, _this);
			
				}).catch(function(){})
				
			}

		},
		components: {
			'HeaDer': HeaDer

		},
		mounted: function() {
			this.uploadcardimg1();
			this.uploadcardimg2();
			this.uploadcardimg3();
		}
	}
</script>

<style>

</style>